<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>统计页面</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="js/vue.js"></script>
  <script src="js/axios-0.18.0.js"></script>
  <script src="js/request.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    .el-row {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }

    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }

    .pagination {
      width: 40%;
      margin: 0 auto;
    }

    .query {
      margin-left: 30%;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 顶栏 -->
    <div class="top">
      <el-row :gutter="20" type="flex" justify="center">

        <!-- 条件选择器 -->
        <el-col :span="8">
          <div class="grid-content bg-light">

            <el-dropdown @command="getClassNames" trigger="click">
              <el-button type="primary">
                {{speciality}}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="item in specialityNames" :command=item
                    :key="item">{{item}}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <el-dropdown @command="getClassName" trigger="click">
              <el-button type="primary">
                {{studentClass}}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="item in classNames" :command=item.studentClass
                    :key="item.studentClass">{{item.studentClass}}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

          </div>
        </el-col>

        <!-- 时间选择器 -->
        <el-col :span="8">
          <div class="grid-content bg-light">
            <el-date-picker v-model="periodOfTime" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
              value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日" />
          </div>
        </el-col>

        <!-- 查询按钮 -->
        <el-col :span="8">
          <el-button class="query" type="primary" size="default" @click="getLearningRecordsByTime">按时间段查询</el-button>
          <el-button type="primary" size="default" @click="getLearningRecordsByClassName">按班级名查询</el-button>
        </el-col>

      </el-row>
    </div>

    <!-- 表格 -->
    <div class="table">
      <el-table :data="tableData" size="large">
        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
        <el-table-column prop="chapter" label="现学章节" align="center"></el-table-column>
        <el-table-column prop="addChapter" label="该时间段章节" align="center"></el-table-column>
        <el-table-column prop="time" label="该事件段累计时长(时)" align="center"></el-table-column>
        <el-table-column prop="efficiency" label="效率(节/时)" align="center"></el-table-column>
      </el-table>
    </div>

    <!-- 分页条 -->
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>


  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          data: [], // 返回的表格数据
          currentPage: 1, // 当前页数
          pageSize: 10, // 展示数据条数
          total: 100, // 记录总条数
          speciality: '请选择专业', // 专业名称
          studentClass: '请选择班级', // 班级名称
          periodOfTime: [], // 时间段数组
          stuClasses: [], // 学生信息
          tableData: [], // 表格数据
          specialityNames: [], // 专业列表
          classNames: [], // 班级列表
          dialogVisible: false, // dialog 是否隐藏
          getByClass: 0, // 是否按班级查询
          getByTime: 0 // 是否按时间查询
        }
      },
      computed: {
        startTime() {
          return this.periodOfTime[0]
        },
        endTime() {
          return this.periodOfTime[1]
        }
      },
      mounted() {
        axios({
          method: 'GET',
          url: '/register/time',
          params: {
            page: this.currentPage,
            pageSize: this.pageSize
          }
        }).then(res => {
          if (res.data.code == 1) {
            this.data = res.data.data.records
            this.total = res.data.data.total
            this.getNewTableData()
            this.$notify({
              title: '欢迎使用',
              message: '勇敢牛牛实验室签到管理系统',
              duration: 3000
            });
          }
        })
        axios({
          method: 'GET',
          url: '/register/books'
        }).then(res => {
          this.stuClasses = res.data.data.names
          this.getSpecialityNames()
        })
      },
      methods: {
        // 章节数据处理
        getNewTableData() {
          this.tableData = this.data.map(item => {
            item.chapter = item.chapter + ' ' + item.day + ' ' + item.content
            return item
          })
        },
        // 获取专业列表
        getSpecialityNames() {
          let set = new Set()
          this.stuClasses.forEach(item => {
            set.add(item.idClass)
          });
          this.specialityNames = [...set]
        },
        // 获取班级列表
        getClassNames(command) {
          this.speciality = command
          this.classNames = this.stuClasses.filter(item => item.idClass == this.speciality)
        },
        // 获得班级
        getClassName(command) {
          this.studentClass = command
        },
        // 根据时间获取学习记录
        getLearningRecordsByTime() {
          this.getByTime = 1
          this.getByClass = 0
          axios({
            method: 'GET',
            url: '/register/time',
            params: {
              page: this.currentPage,
              pageSize: this.pageSize,
              startTime: this.startTime,
              endTime: this.endTime
            }
          }).then(res => {
            if (res.data.code == 1) {
              this.data = res.data.data.records
              this.total = res.data.data.total
              this.getNewTableData()
              this.$message({
                showClose: true,
                message: '查询成功！',
                type: 'success'
              });
            } else if (res.data.code == 0) {
              this.$message({
                showClose: true,
                message: '查询失败！请选择班级！',
                type: 'error'
              });
            }
          })
        },
        // 根据班级名称获取学习记录
        getLearningRecordsByClassName() {
          this.getByClass = 1
          this.getByTime = 0
          axios({
            method: 'GET',
            url: '/register/efficiency',
            params: {
              page: this.currentPage,
              pageSize: this.pageSize,
              idClass: this.speciality,
              studentClass: this.studentClass
            }
          }).then(res => {
            if (res.data.code == 1) {
              this.data = res.data.data.records
              this.total = res.data.data.total
              this.getNewTableData()
              this.$message({
                showClose: true,
                message: '查询成功！',
                type: 'success'
              });
            } else if (res.data.code == 0) {
              this.$message({
                showClose: true,
                message: '查询失败！请选择时间段！',
                type: 'error'
              });
            }
          })
        },
        // 根据默认时间
        getLearningRecordsByDefaultTime() {
          axios({
            method: 'GET',
            url: '/register/time',
            params: {
              page: this.currentPage,
              pageSize: this.pageSize
            }
          }).then(res => {
            if (res.data.code == 1) {
              this.data = res.data.data.records
              this.total = res.data.data.total
              this.getNewTableData()
            }
          })
        },
        // 获取班级名称
        getClassName(command) {
          this.studentClass = command
        },
        // 获取当前页数
        handleCurrentChange(currentPage) {
          this.currentPage = currentPage
        },
        // 获取每页记录条数
        handleSizeChange(pageSize) {
          this.pageSize = pageSize
        }
      },
      watch: {
        currentPage(newQuestion, oldQuestion) {
          if (this.getByTime == 1) {
            this.getLearningRecordsByTime()
          } else if (this.getByClass == 1) {
            this.getLearningRecordsByClassName()
          } else {
            this.getLearningRecordsByDefaultTime()
          }
        },
        pageSize(newQuestion, oldQuestion) {
          if (this.getByTime == 1) {
            this.getLearningRecordsByTime()
          } else if (this.getByClass == 1) {
            this.getLearningRecordsByClassName()
          } else {
            this.getLearningRecordsByDefaultTime()
          }
        },
      }
    })
  </script>
</body>

</html>